<template>
  <div style="padding: 15px;">
    <vxe-toolbar id="warehouseLocationId" :custom="{storage: true}" export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="findList">查询</el-button>
        <el-button @click="modelShowHide('add')">新增</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"     
      class="mytable-footer"
      height="600"
      align="center"
      :loading="loading"
      :data="tableData"
      export-config
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
      sort-config.remote
      @sort-change="sortList"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="standardTemplateUrl" title="自定义模板url" min-width="250" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.standardTemplateUrl " placeholder="自定义模板url" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="standardTemplateName" title="自定义模板名称" min-width="150" sortable/>
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.standardTemplateName " placeholder="自定义模板名称" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="standardWaybillType" title="类型" min-width="90" :formatter="formatterIsLock" sortable/>
        <template v-slot:header="{ column }">
         <el-select v-model="listQuery.standardWaybillType" placeholder="请选择类型" clearable>
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="remarks" title="备注" min-width="150" sortable/>
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.remarks" placeholder="备注" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="详情" placement="top">
            <vxe-button type="text" @click="modelShowHide('detail', scope.row.id)">
              <i class="el-icon-document"/>
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <vxe-button type="text" @click="modelShowHide('edit', scope.row.id)">
              <i class="el-icon-edit"/>
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <vxe-button type="text" @click="funcDelete(scope.row.id)">
              <i class="el-icon-delete"/>
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
    <vxe-modal v-model="operationModel" :title="operation.title" width="700" destroy-on-close>
      <addEdit :operationType="operation.type" :operationCode="operationCode" @operationComplete="modelShowHide();findList()"/>
    </vxe-modal>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import Qs from 'qs'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  Vue.use(VXETable, VXEUtils, XEUtils, {mounts: ['cookie']})
  import addEdit from './components/addEdit.vue'
  import { cloudprintStandardTemplates, cloudprintStandardDelete } from '@/api/basicInfo'

  export default {
    name: 'printTpl',
    components: {
      addEdit,
    },
    data() {
      return {
        tableData: [],
        loading: false,
        listQuery: {
          code: 'ZDY',
          pageNum: 1,
          pageSize: 10
        },
        operationModel: false,
        operation: {
          add: '添加',
          edit: '编辑',
          detail: '详情',
          type: 'add',
        },
        operationCode: '', // 修改，详情，数据的id
        typeList:[
          { value: '0', label: '标准面单类型' },
          { value: '1', label: '快递标准面单' },
          { value: '2', label: '快递三联面单' },
          { value: '3', label: '快递便携式三联单' },
          { value: '4', label: '快运标准面单' },
          { value: '5', label: '快运三联面单' },
          { value: '6', label: '快递一联单' }
        ]       
      }
    },
    created() {
      this.findList()
    },
    methods: {
      findList(){
      this.loading = true;
      if(!this.listQuery.standardWaybillType){
        delete this.listQuery.standardWaybillType
      }
       return cloudprintStandardTemplates(Qs.stringify(this.listQuery)).then(response => { 
        this.loading = false;
        this.tableData = response.data.records
        this.listQuery.total = response.data.total
      })
    },
    modelShowHide(type, id) {
      this.operationModel = !this.operationModel
      if (type) {
        this.operation.type = type
        this.operation.title = this.operation[type]
      }
      if (id) {
        this.operationCode = id
      }
    },
    // 分页handle
    handlePageChange({currentPage, pageSize}) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.findList()
    },
    // 排序
    sortList({ column, property, order }) {
      if (order) {
        this.listQuery.sortField = property
        this.listQuery.sortType = order
      } else {
        this.listQuery.sortField = ''
      }
      this.findList()
    },
    formatterIsLock({cellValue}) {
        return this.typeList[cellValue] ? this.typeList[cellValue].label : cellValue
      },
    // funcDelete删除
    funcDelete(row){
      this.$confirm('确认删除吗？').then(_ => {
        cloudprintStandardDelete(row).then(response => {
            this.$message({ dangerouslyUseHTMLString: true,message: response.msg, type: 'success'})
          this.findList()
        })
      }).catch(_ => {})
    }
    }
  }
</script>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }

  .vxe-toolbar {
    padding: 0 0 10px 0
  }
</style>

